<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-IsFile__isfile">
            <div class="topss">
                <div class="topss1">
                    <el-input
                            v-model="scenicName"
                            placeholder="路线名称"
                            clearable
                    ></el-input>
                </div>
                <div class="topss2">
                    <el-button @click="getDataList">{{ $t('query') }}</el-button>
                    <el-button type="primary" @click="addHandle()">{{ $t('add') }}</el-button>
                </div>
            </div>

            <el-table
                    v-loading="dataListLoading"
                    :data="dataList"
                    border
                    style="width: 100%">

                <el-table-column
                        prop="itineraryname"
                        label="路线名称"
                        header-align="center"
                        align="center"
                ></el-table-column>
                <!--<el-table-column-->
                <!--prop="itinerarybrief"-->
                <!--label="行程简介"-->
                <!--header-align="center"-->
                <!--align="center"-->
                <!--&gt;</el-table-column>-->
                <!--<el-table-column-->
                <!--prop="size"-->
                <!--label="行程概览"-->
                <!--header-align="center"-->
                <!--align="center"-->
                <!--&gt;</el-table-column>-->

                <el-table-column
                        :label="$t('handle')"
                        fixed="right"
                        header-align="center"
                        align="center"
                        width="150">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                size="small"
                                @click="addOrUpdateHandle(scope.row.id)"
                        >{{ $t('update') }}
                        </el-button>
                        <el-button type="text" size="small" @click="viewHandle(scope.row.id)"
                        >查看
                        </el-button>
                        <el-button
                                type="text"
                                size="small"
                                @click="deleteHandle(scope.row.id)"
                        >{{ $t('delete') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="limit"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            >
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
            <el-dialog
                    :title="mytitle"
                    :visible.sync="dialogVisible"
                    width="90%">
                <div class="formdiv">
                    <el-form
                            :inline="true"
                            :model="dataForm"
                            ref="dataForm"
                            :disabled="disabled"
                            label-width="100px"
                    >
                        <el-row :gutter="30">
                            <el-col :span="8">
                                <el-form-item label="行程名称" prop="itineraryname">
                                    <el-input v-model="dataForm.itineraryname"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="行程简介" prop="itinerarybrief">
                                    <!--<el-input type="textarea" v-model="dataForm.itinerarybrief"></el-input>-->
                                    <el-input v-model="dataForm.itinerarybrief" placeholder="行程简介" type="textarea" :rows="5"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <div class="xingcheng" v-for="(item,index) in dataForm.journeylist" :key="index">
                                    <div class="xingcheng1">
                                        <el-col :span="8">
                                            <el-form-item label="选择天" prop="days">
                                                <!--<el-input-number v-model="item.days" :step="1" step-strictly :min="1"-->
                                                <!--:max="10" label="选择天数"></el-input-number>-->
                                                <el-select v-model="item.days" placeholder="请选择">
                                                    <el-option
                                                            v-for="item in optionsdays"
                                                            :key="item.value"
                                                            :label="item.label"
                                                            :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="选择所属区域" prop="selectisland">
                                                <el-select v-model="item.selectisland" placeholder="请选择活动区域">
                                                    <el-option
                                                            v-for="item in daoyudata"
                                                            :key="item.value"
                                                            :label="item.label"
                                                            :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="选择地点" prop="locations">
                                                <el-select filterable clearable v-model="item.locations"
                                                           placeholder="选择地点">
                                                    <el-option
                                                            v-for="item in jingdiandatalist"
                                                            :key="item.name"
                                                            :label="item.name"
                                                            :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="行程建议" prop="itinerarysuggestion">
                                                <!--<el-input v-model="item.itinerarysuggestion"></el-input>-->
                                                <el-input   v-model="item.itinerarysuggestion" placeholder="行程建议" type="textarea" :rows="5"></el-input>
                                            </el-form-item>
                                        </el-col>

                                        <el-col :span="16">
                                            <el-form-item label="推荐理由" prop="recommendationreason">
                                                <!--<el-input type="textarea"-->
                                                          <!--v-model="item.recommendationreason"></el-input>-->
                                                <el-input   v-model="item.recommendationreason" placeholder="推荐理由" type="textarea" :rows="5"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </div>
                                    <div class="xingcheng2">
                                        <el-button size="mini" type="danger" @click="deletedata(item,index)">删除
                                        </el-button>
                                    </div>
                                </div>

                            </el-col>
                            <el-col :span="24" style="margin-top: 10px">
                                <el-form-item label="添加景区" prop="" class="rooms">
                                    <el-button type="primary" @click="Additionarea">新增</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span v-if="!disabled" slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="queding">确 定</el-button>
  </span>
            </el-dialog>

        </div>
    </el-card>
</template>

<script>
  export default {
    data () {
      return {
        daoyudata: [
          {
            value: 1,
            label: '泗礁岛'
          },
          {
            value: 2,
            label: '黄龙岛'
          },
          {
            value: 3,
            label: '花鸟岛'
          },
          {
            value: 4,
            label: '枸杞岛'
          },
          {
            value: 5,
            label: '嵊山岛'
          },
          {
            value: 6,
            label: '大、小洋山岛'
          },
          {
            value: 7,
            label: '绿华岛'
          },
        ],
        optionsdays: [{
          value: 1,
          label: '第一天'
        }, {
          value: 2,
          label: '第二天'
        }, {
          value: 3,
          label: '第三天'
        }, {
          value: 4,
          label: '第四天'
        }, {
          value: 5,
          label: '第五天'
        },
          {
            value: 6,
            label: '第六天'
          },
          {
            value: 7,
            label: '第七天'
          },
          {
            value: 8,
            label: '第八天'
          },
          {
            value: 9,
            label: '第九天'
          },
          {
            value: 10,
            label: '第十天'
          },
        ],
        mytitle: '',
        dataListLoading: false,
        dataList: [],
        scenicName: '',
        disabled: false,
        dialogVisible: false,
        jingdiandatalist: [],
        page: 1,
        limit: 10,
        total: 0,

        dataForm: {
          itineraryname: '', //行程名称
          itinerarybrief: '',//行程简介
          journeylist: [
            {
              days: 1,//选择天数
              itinerarysuggestion: '',//行程建议
              selectisland: 1,//选择岛屿
              locations: '',// 选择地点id
              recommendationreason: '',//推荐理由
            },
          ],
        },
      }
    },
    watch: {},
    components: {},
    created () {
      this.jingdiandata()
      this.getDataList()
    },

    methods: {

      deletedata (e, f) {
        this.$confirm('您将删除当前数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dataForm.journeylist.splice(f, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {

        })
      },
      Additionarea () {
        this.dataForm.journeylist.push({
          days: 1,//选择天数
          Itinerarysuggestion: '',//行程建议
          Selectisland: 1,//选择岛屿
          Locations: '',// 选择地点id
          Recommendationreason: '',//推荐理由
        })
      },
      handleSizeChange (val) {
        this.limit = val
        this.page = 1
        this.getDataList()
      },
      handleCurrentChange (val) {
        console.log(val)
        this.page = val
        this.getDataList()

      },
      getDataList () {
        this.$http
          .get(`/sys/maprouting/page`, {
            params: {
              page: this.page,
              limit: this.limit,
              itineraryname: this.scenicName,
            }
          })
          .then((res) => {
            console.log('111111111111111111', res)
            if (res.data.code == 0) {
              this.total = res.data.data.total
              this.dataList = res.data.data.list
            } else {
              this.$message.error(res.data.msg)
            }
          })
      },
      jingdiandata () {
        this.$http
          .get(`/sys/ismap/`, {
            params: {
              page: 1,
              limit: 999999,
            }
          })
          .then((res) => {
            //  console.log('111111111111111111',res)
            if (res.data.code == 0) {
              this.jingdiandatalist = res.data.data.list
            } else {
              this.$message.error(res.data.msg)
            }
          })
      },
      deleteHandle (e) {
        this.$confirm('您将删除当前数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http
            .delete(`sys/maprouting/delete/route?id=${e}`)
            .then((res) => {
              console.log('111111111111111111', res)
              if (res.data.code == 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.limit = 10
                this.page = 1
                this.getDataList()
              } else {
                this.$message.error(res.data.msg)
              }
            })
        }).catch(() => {

        })
      },
      addHandle () {
        this.mytitle = '新增'
        this.dialogVisible = true
        this.disabled = false
        this.dataForm = {
          itineraryname: '', //行程名称
          itinerarybrief: '',//行程简介
          alllocations: '',//景点数量
          alldays: '',//游玩天数
          journeylist: [
            {
              days: 1,//选择天数
              itinerarysuggestion: '',//行程建议
              selectisland: 1,//选择岛屿
              locations: '',// 选择地点id
              recommendationreason: '',//推荐理由
            },
          ],
        }
      },
      viewHandle (e) {
        this.mytitle = '查看'
        this.$http
          .get(`sys/maprouting/query?id=${e}`)
          .then((res) => {
            if (res.data.code == 0) {
              //  console.log('111111111111111111',res.data.data)
              this.dialogVisible = true
              this.disabled = true
              this.dataForm = res.data.data
            } else {
              this.$message.error(res.data.msg)
            }
          })
        // this.dialogVisible = true
      },
      addOrUpdateHandle (e) {
        this.mytitle = '修改'
        this.$http
          .get(`sys/maprouting/query?id=${e}`)
          .then((res) => {
            if (res.data.code == 0) {
              //  console.log('111111111111111111',res.data.data)
              this.dialogVisible = true
              this.disabled = false
              this.dataForm = res.data.data
            } else {
              this.$message.error(res.data.msg)
            }
          })
        // this.dialogVisible = true
      },
      queding () {
        let maxday = this.dataForm.journeylist.reduce((maxValue, currentObj) => {
          return Math.max(maxValue, currentObj.days)
        }, -Infinity)
        console.log(maxday) // 输出 15
        let locationdata = this.dataForm.journeylist.length

        this.dataForm.alllocations = locationdata
        this.dataForm.alldays = maxday

        if (this.mytitle == '新增') {

          this.$http.post(`/sys/maprouting/itinerary`, this.dataForm)
            .then((res) => {
              console.log('111111111111111111', res)
              if (res.data.code == 0) {

                this.dialogVisible = false
                this.$message({
                  message: '成功',
                  type: 'success'
                })
                this.limit = 10
                this.page = 1
                this.getDataList()
              } else {
                this.$message.error(res.data.msg)
              }
            })
        } else if (this.mytitle == '修改') {
          this.$http.post(`/sys/maprouting/updateBatchRelation`, this.dataForm)
            .then((res) => {
              console.log('111111111111111111', res)
              if (res.data.code == 0) {

                this.dialogVisible = false
                this.$message({
                  message: '成功',
                  type: 'success'
                })
                this.limit = 10
                this.page = 1
                this.getDataList()

              } else {
                this.$message.error(res.data.msg)
              }
            })

        }

      },

    },
  }
</script>
<style lang="scss" scoped>

.formdiv{
    width: 100%;
    height: 550px;
   overflow-y: auto;
    overflow-x: hidden;
}
    .topss2 {
        margin-left: 20px;
    }

    .topss {
        width: 100%;
        height: 50px;
        display: flex;
    }

    .jdxq {
        width: 100%;
        min-height: 100px;
        border: 1px solid #e6e6e6;
        padding: 10px 0;
        display: flex;
    }

    .el-form--inline .el-form-item {
        display: flex;
        margin-right: 10px;
        vertical-align: top;
        width: 100%;
    }

    ::v-deep .el-form--inline .el-form-item__content {
        width: 100%;
    }

    .el-form-item__content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
        width: 100%;
    }

    .xingcheng {
        width: 100%;
        height: 200px;
        border: 1px solid #e6e6e6;
        padding: 10px 0;
        display: flex;
        margin-bottom: 5px;
    }

    .xingcheng1 {
        flex-grow: 1;
        border-right: 1px solid #e6e6e6;
    }

    .xingcheng2 {
        width: 70px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
